import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import { useEffect, useRef } from 'react'
/* -------------------------------------------------------- 视频播放器 -- */
const Index = ({
		src,						/** @param {Object}					# 视频地址 */
		config 						/** @param {Object}					# 视频配置 */
	}) => {
	const playerRef = useRef()
	
	useEffect(()=>{
		const player = videojs(
			playerRef.current, 
			{
				autoplay: false, 						// 自动播放：true/false
				controls: true, 						// 是否显示底部控制栏：true/false
				// width: 300, 							// 视频播放器显示的宽度
				// height: 300, 							// 视频播放器显示的高度
				loop: true, 							// 是否循环播放:true/false
				muted: false, 							// 设置默认播放音频：true/false
				poster:'', 								// 视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
				src:'', 								// 要嵌入的视频资源url，The source URL to a video source to embed.
				techOrder: ['html5'], 			// 使用播放器的顺序,下面的示例说明优先使用html5播放器，如果不支持将使用flash
				notSupportedMessage: false, 			// 是否允许重写默认的消息显示出来时，video.js无法播放媒体源
				plugins: {}, //插件
				// sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //资源文件等价于html中的形式source标签 
				// aspectRatio:'1:1', 						// 将播放器置于流体模式下，计算播放器动态大小时使用该值。
														// 该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
				fluid: false,							// 是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
														// 如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
				preload: 'metadata', 					// 建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载)
														// auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
														// metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
														// none
				...config
			}
		)
		if( src ){
			player.src( window.$fn.url(src) )
		}
		/*
		//播放完成
		player.on('suspend', () => {				// 延迟下载
			console.log("延迟下载")
		})
		player.on('loadstart', () => {				// 客户端开始请求数据
			console.log("客户端开始请求数据")
		})
		player.on('progress', () => {				// 客户端正在请求数据
			console.log("客户端正在请求数据")
		})
		player.on('abort', () => {					// 客户端主动终止下载（不是因为错误引起）
			console.log("客户端主动终止下载")
		})
		player.on('error', () => {					// 请求数据时遇到错误
			console.log("请求数据时遇到错误")
		})
		player.on('stalled', () => {				// 网速失速
			console.log("网速失速")
		})
		player.on('play', () => {					// 开始播放
			console.log("开始播放")
		})
		player.on('pause', () => {					// 暂停
			console.log("暂停")
		})
		player.on('loadedmetadata', () => {			// 成功获取资源长度
			console.log("成功获取资源长度")
		})
		player.on('loadeddata', () => {				// 渲染播放画面
			console.log("渲染播放画面")
		})
		player.on('waiting', () => {				// 等待数据，并非错误
			console.log("等待数据")
		})
		player.on('playing', () => {				// 开始回放
			console.log("开始回放")
		})
		player.on('firstplay', () => {				// 开始回放
			console.log("首次播放")
		})
		player.on('canplay', () => {				// 可以播放，但中途可能因为加载而暂停
			console.log("可以播放，但中途可能因为加载而暂停")
		})
		player.on('canplaythrough', () => {			// 可以播放，歌曲全部加载完毕
			console.log("可以播放，歌曲全部加载完毕")
		})
		player.on('seeking', () => {				// 寻找中
			console.log("寻找中")
		})
		player.on('seeked', () => {					// 寻找完毕
			console.log("寻找完毕")
		})
		player.on('timeupdate', () => {				// 播放时间改变
			console.log("播放时间改变")
		})
		player.on('ended', () => {					// 播放结束
			console.log("播放结束")
		})
		player.on('ratechange', () => {				// 播放速率改变
			console.log("播放速率改变")
		})
		player.on('fullscreenchange', () => {		// 播放速率改变
			console.log("全屏切换改变")
		})
		player.on('durationchange', () => {			// 资源长度改变
			console.log("资源长度改变")
		})
		player.on('volumechange', () => {			// 音量改变
			console.log("音量改变")
		})
		*/
		playerRef.current.oncontextmenu = function () { return false }
		
		return () => {
			player.dispose()
		}
	},[ src, config ])
	
	return (
		<div className='abs_full'><video ref={playerRef} className='video-js wh'></video></div>
	)
}
export default Index